<template>
  <div class="box">
    <div class="bg"></div>
    <van-nav-bar
      id="van-bar"
      :title="title"
      :border="border"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #left>
        <img
          :style="{ width: widthPx, height: heightPx }"
          src="@/assets/iconPerfectInformation/nav_back@2x.png"
        />
      </template>
    </van-nav-bar>
    
    <div
    class="glance"
      :style="
        'top:' +
        (topheight  )+
        'px;height:calc(100vh - ' +
        (topheight )+
        'px);width:100%;overflow:auto;'
      "
    >
  
    <div class="title">欢迎进行实名认证</div>
    <div class="title1">我们致力于打造一个真实、安全、优质的交友平台，通过认证的用户得到更优质精准的匹配和更多的列表曝光</div>
    <img src="@/assets/myicon/img-authentication.png"  class="img" srcset="">
    <div class="title2">本过程需要您亲自完成，仅需要一分钟您提交的资料仅用于实名认证审核</div>
    <div class="btn" @click="goto()">开始认证</div>

    </div>
  <div class="error-box" v-if="isShow1">
    <div class="bg1" @click="isShow1=false"></div>
    <div class="error">
        <div class="head">
            <span>认证失败</span>
            <img src="@/assets/myicon/popup-failed.png" alt="">
        </div>
        <div class="content">
            很抱歉，您的实名认证未通过，请重新认证
        </div>
    </div>
  </div>
     
  </div>
</template>

<script>
import { GetVerifyToken } from '@/api/setting'

export default {
  data() {
    return {
      border: "",
      widthPx: "28px",
      heightPx: "28px",
      topheight: 0,
      isActive: 0,
      isshow:true,
      title: "实名认证",
      isActive:0,
      isShow1:false,
     isShow:false
    };
  },
  mounted() {
    this.topheight = document.getElementById("van-bar").offsetHeight;
    if (this.$route.params.type=='error') {
      this.isShow1=true
    }
  },

  methods: {
    goto(){
      // this.$router.push('/attestation/error')
     GetVerifyToken().then((res) => {
        console.log(res.data.verify_token)

        this.$store.commit('SET_BAIDU_TOKEN', res.data.verify_token)
        window.location.href=`https://brain.baidu.com/face/print/?token=${res.data.verify_token}&successUrl=http://localhost:8080/attestation/success?token=${res.data.verify_token}&failedUrl=http://localhost:8080/attestation?type=error&useNative=1`
     
       
      })
     
    },
    onClickLeft() {
      this.$router.push('/my');
    },
    qiehuan(e){
      this.isActive=e
    }
  },
};
</script>

<style scoped>


.bg{
  width: 375px;
height: 88px;
position: absolute;
  top: 0;
background: linear-gradient(180deg, #CDE1FD 0%, rgba(255,255,255,0) 100%);
}
.glancelist {
  width: 345px;
  margin: 0 auto;
}
.title{
    text-align: center;
    width: 100%;
   font-size: 36px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #1A1A1A;
line-height: 36px;
margin-top: 47px;
}
.title1{
    width: 291px;
    font-size: 12px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #767676;
margin: 0 auto;
line-height: 17px;
margin-top: 15px;
}
.img{
  width: 164px;
  display: block;
  margin: 0 auto;
  margin-top: 46px;
height: 207px;
}
.title2{
    text-align: center;
    width: 240px;
    font-size: 14px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #767676;
margin: 0 auto;
line-height: 20px;
margin-top: 36px;
}
.error{
    width: 310px;
height: 173px;
background: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 8px;
}
.error-box{
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bg1{
  background-color: #1A1A1A;
  opacity: 0.5;
  height: 100%;
  width: 100%;
}
.head{
    width: 100%;
    line-height: 48px;
height: 48px;
background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%);
border-radius: 8px 8px 0px 0px;
}
.head span{
     margin: 0px 24px;
     font-size: 16px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.head img{
    float: right;
    display: inline-block;
    margin: 8px 24px;
}
.content{
    margin: 30px auto;
    width: 264px;
    font-size: 14px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
line-height: 20px;
color: #3D3D3D;
}
.van-cell {
  background-color: transparent;
}
.van-cell::after {
  border-color: #d8d8d8;
}
.van-cell__value {
  color: #1a1a1a;
  font-weight: 500;
}
.btn{
  margin: 0 auto;
   width: 204px;
height: 40px;
background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%);
border-radius: 8px;
font-size: 14px;
margin-top: 50px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 40px;
text-align: center;
}
.bg1{
  background-color: #1A1A1A;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}
</style>
